<template>
    <div class="node-card" @mouseenter="hovered = true" @mouseleave="hovered = false" @click="toggleExpandSelf">
        <span v-if="children.length > 0" class="triangle" :class="{ expanded: isExpanded }"
            @click.stop="toggleExpandSelf">&#9654;</span>
        <span class="node-title">{{ node.name }}</span>
        <div class="node-actions">
            <button class="action-btn" @click.stop="$emit('open-relation', node)">关系设置</button>
            <button class="action-btn" @click.stop="showSiblingInput = true">添加同级</button>
            <button class="action-btn" @click.stop="showChildInput = true">添加子级</button>
        </div>
    </div>
    <div v-if="isExpanded && children.length" class="node-children">
        <KnowledgeNode v-for="child in children" :key="child.id" :node="child" :all-nodes="allNodes"
            :expanded-node-ids="expandedNodeIds" @toggle-expand="$emit('toggle-expand', $event)"
            @add-sibling="$emit('add-sibling', $event)" @add-child="$emit('add-child', $event)"
            @open-relation="$emit('open-relation', $event)" />
    </div>
    <!-- 关系标签显示 -->
    <div v-if="hasRelations" class="relation-tags">
        <template v-if="node.prerequisites && node.prerequisites.length">
            <span class="relation-label">前置：</span>
            <span v-for="id in node.prerequisites" :key="'pre-'+id" class="relation-tag">{{ getNodeName(id) }}</span>
        </template>
        <template v-if="node.postrequisites && node.postrequisites.length">
            <span class="relation-label">后置：</span>
            <span v-for="id in node.postrequisites" :key="'post-'+id" class="relation-tag">{{ getNodeName(id) }}</span>
        </template>
        <template v-if="node.relations && node.relations.length">
            <span class="relation-label">关联：</span>
            <span v-for="id in node.relations" :key="'rel-'+id" class="relation-tag">{{ getNodeName(id) }}</span>
        </template>
    </div>
    <div v-if="showSiblingInput" class="add-inline-input">
        <input v-model="siblingName" placeholder="新同级知识点" class="add-input" />
        <button class="confirm-btn" @click="submitSibling">✔</button>
        <button class="cancel-btn" @click="cancelSibling">✖</button>
    </div>
    <div v-if="showChildInput" class="add-inline-input">
        <input v-model="childName" placeholder="新子级知识点" class="add-input" />
        <button class="confirm-btn" @click="submitChild">✔</button>
        <button class="cancel-btn" @click="cancelChild">✖</button>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue'
    const props = defineProps({
        node: Object,
        allNodes: Array,
        expandedNodeIds: Object // Set
    })
    const children = computed(() =>
        props.allNodes.filter(item => item.parentId === props.node.id)
    )
    const hovered = ref(false)
    const isExpanded = computed(() => props.expandedNodeIds && props.expandedNodeIds.has(props.node.id))
    function toggleExpandSelf() {
        if (children.value.length > 0) {
            emit('toggle-expand', props.node.id)
        }
    }
    // 关系显示相关
    const hasRelations = computed(() =>
        (props.node.prerequisites && props.node.prerequisites.length) ||
        (props.node.postrequisites && props.node.postrequisites.length) ||
        (props.node.relations && props.node.relations.length)
    )
    function getNodeName(id) {
        const n = props.allNodes.find(n => n.id === id)
        return n ? n.name : id
    }

    // 同级输入框
    const showSiblingInput = ref(false)
    const siblingName = ref('')
    function submitSibling() {
        if (!siblingName.value.trim()) return
        // 传递自定义名称给父组件
        emit('add-sibling', { node: props.node, name: siblingName.value.trim() })
        siblingName.value = ''
        showSiblingInput.value = false
    }
    function cancelSibling() {
        siblingName.value = ''
        showSiblingInput.value = false
    }

    // 子级输入框
    const showChildInput = ref(false)
    const childName = ref('')
    function submitChild() {
        if (!childName.value.trim()) return
        emit('add-child', { node: props.node, name: childName.value.trim() })
        childName.value = ''
        showChildInput.value = false
    }
    function cancelChild() {
        childName.value = ''
        showChildInput.value = false
    }

    const emit = defineEmits(['toggle-expand', 'add-sibling', 'add-child', 'open-relation'])
</script>

<style scoped>
    .node-card {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #fff;
        border-radius: 6px;
        min-height: 44px;
        line-height: 44px;
        padding: 0 20px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px #e0e6ed;
        transition: box-shadow 0.2s, background 0.2s;
        cursor: pointer;
    }

    .triangle {
        display: inline-block;
        width: 16px;
        margin-right: 6px;
        font-size: 14px;
        color: #222;
        transition: transform 0.2s;
        transform: rotate(0deg);
        user-select: none;
    }

    .triangle.expanded {
        transform: rotate(90deg);
    }

    .node-card:hover {
        box-shadow: 0 4px 12px #d0d8e0;
        background: #f0f6ff;
    }

    .node-title {
        font-weight: 500;
        font-size: 15px;
        color: #222;
        flex: none;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .node-actions {
        display: flex;
        gap: 18px;
        margin-left: auto;
    }

    .action-btn {
        font-size: 14px;
        color: #3a7afe;
        padding: 0 8px;
        min-width: 64px;
        text-align: right;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s, color 0.2s;
    }

    .action-btn:hover {
        color: #0056b3;
        background: #eaf2ff;
    }

    .node-children {
        margin-left: 32px;
    }

    .add-inline-input {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0 8px 0;
    }

    .add-input {
        border: 1px solid #d0d8e0;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 14px;
        width: 180px;
    }

    .confirm-btn,
    .cancel-btn {
        background: #fff;
        border: 1px solid #3a7afe;
        color: #3a7afe;
        border-radius: 4px;
        font-size: 15px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .confirm-btn:hover {
        background: #3a7afe;
        color: #fff;
    }

    .cancel-btn:hover {
        background: #ffeded;
        color: #ff4d4f;
        border-color: #ff4d4f;
    }

    .relation-tags {
        margin: 4px 0 4px 0;
        font-size: 13px;
        color: #888;
    }

    .relation-label {
        font-weight: bold;
        color: #3a7afe;
        margin-right: 4px;
    }

    .relation-tag {
        display: inline-block;
        background: #eaf2ff;
        color: #3a7afe;
        border-radius: 4px;
        padding: 1px 8px;
        margin-right: 6px;
        font-size: 13px;
    }
</style>